<template>
  <div class="personal">
    <Navi title="个人资料" :fixed="true" />
    <div class="msg" v-if="isLogin">
      <div class="userImg">
        <van-cell is-link @click="showUserImg">头像</van-cell>
        <van-popup v-model="userImg" round position="bottom">
          <div>
            <div class="photo">从手机相册选择</div>
            <div class="take-photo">拍照</div>
          </div>
        </van-popup>
      </div>

      <div>
        <van-cell is-link @click="showName">用户名</van-cell>
        <van-popup
          v-model="name"
          closeable
          round
          :close-on-click-overlay="false"
        >
          <div class="changeUsername">
            <div class="title">修改用户名</div>
            <input class="username" v-model="username" />
            <div class="commit" @click="commitUsername">提交</div>
          </div>
        </van-popup>
      </div>

      <div class="gender">
        <van-cell is-link @click="showGender">性别</van-cell>
        <van-popup v-model="gender" round position="bottom">
          <div class="changeGender">
            <div class="man">男</div>
            <div class="woman">女</div>
          </div>
        </van-popup>
      </div>

      <div class="birth">
        <van-cell is-link @click="showBirth">生日</van-cell>
        <van-popup v-model="birth" round position="bottom">
          <div class="changeBirth">
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
            />
          </div>
        </van-popup>
      </div>

      <div class="phone-box">
        <van-cell is-link
          >绑定手机
          <div class="phone-number">13242826864</div>
        </van-cell>
      </div>

      <div class="address">
        <van-cell is-link @click="goAddress">收货地址</van-cell>
      </div>

      <div class="exitLogin" @click="exitLogin">退出登陆</div>
    </div>

    <div v-else>
      <van-empty description="您未登录">
        <van-button round type="danger" class="bottom-button" @click="gotoLogin"
          >去登录</van-button
        >
      </van-empty>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "Personal",
  components: {
    Navi,
  },
  data() {
    return {
      name: false,
      username: "",
      isLogin: false,
      gender: false,
      birth: false,
      minDate: new Date(1930, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2000, 0, 1),
      phone: "",
      userImg: false,
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    showName() {
      this.name = true;
    },
    showGender() {
      this.gender = true;
    },
    showBirth() {
      this.birth = true;
    },
    showUserImg() {
      this.userImg = true;
    },
    goLogin() {
      this.$router.push({ name: "Login" });
    },

    goAddress() {
      this.$router.push({ name: "MyAddress" });
    },

    commitUsername() {
      this.$router.go(0);
      this.$toast("修改成功");
    },
    getUserInfo() {
      this.axios({
        method: "get",
        url: "/findMy",
      })
        .then((result) => {
          if (result.data.code === "A001") {
            this.username = result.data.result[0].nickName;
            this.isLogin = true;
          }
        })
        .catch((err) => {
        });
    },
    gotoLogin() {
      this.$router.push({ name: "Login" });
    },
    exitLogin() {
      window.localStorage.clear();
      this.$router.push({name:"Login"});
      this.isLogin = false;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #f5f5f5;
}
.personal {
  background-color: #f5f5f5;
  .bottom-button {
    width: 160px;
    height: 40px;
  }
  .exitLogin {
    margin-top: 15px;
    border-radius: 20px;
    text-align: center;
    background-color: #0c34ba;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    color: white;
  }
  .gender {
    /deep/ .van-popup.van-popup--round.van-popup--bottom {
      width: 90%;
      height: 100px;
      border-radius: 20px;
      bottom: 30px;
      left: 18.75px;
      background-color: #f5f5f5;
    }
  }

  .userImg {
    /deep/ .van-popup.van-popup--round.van-popup--bottom {
      width: 90%;
      height: 100px;
      border-radius: 20px;
      bottom: 30px;
      left: 18.75px;
      background-color: #f5f5f5;
    }
  }
  .man,
  .woman,
  .photo,
  .take-photo {
    height: 50px;
    text-align: center;
    line-height: 50px;
  }

  .phone-box {
    .van-cell__value.van-cell__value--alone {
      position: relative;
      .phone-number {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
  .van-popup.van-popup--round.van-popup--center {
    width: 90%;
    height: 180px;
    margin: 0px auto;
  }
  .birth {
    /deep/ .van-popup.van-popup--round.van-popup--bottom {
      width: 100%;
      height: 308px;
      border-radius: 20px 20px 0 0;
      bottom: 0px;
      left: 0px;
      background-color: #f5f5f5;
    }
  }
  .title {
    text-align: center;
    height: 50px;
    background-color: #f5f5f5;
    line-height: 50px;
    font-size: 18px;
    color: gray;
  }
  .username {
    width: 80%;
    margin: 20px auto;
    background-color: #f5f5f5;
    display: block;
    border: none;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
  }
  .commit {
    width: 80%;
    margin: 0 auto;
    background-color: #0c34ba;
    color: white;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 20px;
  }
}
.msg {
  margin: 46px 10px 50px 10px;
  .van-cell.van-field {
    &:first-child {
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
    }
    &:last-child {
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }
}
</style>